<template>
  <el-dialog
    v-model="visible"
    :title="showTitle"
    :width="props.width"
    v-bind="$attrs"
    @close-auto-focus="cancel"
  >
    <CEForm
      :fields="props.fields"
      :formValue="diaFormValue"
      :isView="props.isViews"
      ref="ceFormRef"
    />
    <ElRow :justify="props.btnsFlex">
      <ElButton :loading="loading" type="primary" @click="submit">{{
        props.submitText
      }}</ElButton>
      <ElButton @click="cancel">{{ props.cancelText }}</ElButton>
    </ElRow>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'

import defaultProps, { emit } from './props'
import { cloneDeep } from 'lodash-es'
import { ElMessage } from 'element-plus'

const props = defineProps(defaultProps)
const emits = defineEmits(emit)

const visible = ref(false)

const curId = ref()

const diaFormValue = ref({})

const ceFormRef = ref()

const loading = ref(false)

const showTitle = computed(() =>
  props.isViews
    ? props.viewTitle
    : curId.value
      ? props.editTitle
      : props.addTitle
)

const show = (id: number) => {
  curId.value = id
  visible.value = true
  // 设置初始化值。仅此生效 --- > 后续在根据实际情况修改
  nextTick(() => {
    if (props.defaultValue)
      diaFormValue.value = {
        ...diaFormValue.value,
        ...props.defaultValue
      }
  })
  if (curId.value) getFormValue()
}

const getFormValue = () => {
  if (props.httpGet) {
    props.httpGet(curId.value).then((res: Record<string, any>) => {
      let handerValue = {}
      if (props.getHandler) handerValue = props.getHandler(res.data)
      else handerValue = res.data
      diaFormValue.value = cloneDeep({ ...diaFormValue.value, ...handerValue })
    })
  } else {
    Object.assign(
      diaFormValue.value,
      cloneDeep({ ...diaFormValue.value, ...props.value })
    )
  }
}

const submit = async () => {
  const result = await ceFormRef.value?.validate()

  // cloneDeep 防止 handler 数据重复
  const formValue = cloneDeep(result)
  const handlerValue =
    props.handler && typeof props.handler === 'function'
      ? props.handler(formValue)
      : { ...formValue }
  if (!handlerValue) return console.error('HANDER_NOT_RETURN_DATA')
  if (curId.value) {
    if (!props.httpEdit) return console.error('NO_HTTP_EDIT')
    loading.value = true
    props
      .httpEdit(curId.value, handlerValue)
      .then(() => {
        ElMessage({
          type: 'success',
          message: props.successMsg
        })
        cancel()
        emits('reload')
      })
      .finally(() => {
        loading.value = false
      })
  } else {
    if (!props.httpAdd) return console.error('NO_HTTP_ADD')
    loading.value = true
    props
      .httpAdd(handlerValue)
      .then(() => {
        ElMessage({
          type: 'success',
          message: props.successMsg
        })
        cancel()
        emits('reload')
      })
      .finally(() => {
        loading.value = false
      })
  }
}

const cancel = () => {
  ceFormRef.value?.resetForm()
  visible.value = false
}

defineExpose({
  show
})

defineOptions({
  name: 'CEDiaForm'
})
</script>

<style lang="scss"></style>
